<!--
 * @Author: “luwenwen” 2199987619@qq.com
 * @Date: 2023-07-11 11:00:14
 * @LastEditors: 噜噜雯雯 2199987619@qq.com
 * @LastEditTime: 2025-09-28 10:41:08
 * @Description: 用气量统计
-->
<script setup lang="ts">
import { useSCADAStore } from "@/store/modules/scada";
import { ContentWrap } from "@/components/ContentWrap";
import { computed,reactive, ref,onUnmounted  } from "vue";
import { ElForm,ElFormItem,ElInput,ElTooltip } from "element-plus";
import { Echart } from "@/components/Echart";
import { Gas30DayOptions } from "./components/echarts-data";
import { EChartsOption } from "echarts";
import { set } from "lodash-es";
import { Icon } from '@/components/Icon'
import { Dialog } from '@/components/Dialog'
import { BaseButton } from '@/components/Button'
import { RealGasType } from "@/api/scada/type";
import  SCADAApi  from "@/api/scada";
import { useIntervalFn } from "@vueuse/core"; // 引入 useIntervalFn
const formData = reactive({
  NameOrdeviceNo: '',
  Date:'today',
  Sort: 'Asc',
})
const dialogVisible = ref(false)
const save = () => {
  dialogVisible.value = false;
}
const SCADAStore=useSCADAStore()
const markers = computed(() => SCADAStore.getRealGasDetail(formData.NameOrdeviceNo,formData.Date,formData.Sort));
const { pause } = useIntervalFn(
  () => {
    console.log("yong自动刷新表格数据...");
    SCADAStore.setRealGasDetail()
  },
  60000, // 60秒 = 1分钟
  {
    immediate: true, // 立即开始执行
    immediateCallback: true, // 立即执行回调（首次加载也执行）
  }
);

// 组件卸载时停止定时器
onUnmounted(() => {
  pause();
});

const MonthDetail=async(Data:RealGasType)=>{
  dialogVisible.value = true;
 const i= await SCADAApi.GetMonthGas(Data.deviceNo)
 if(i){
  getMonthlySales(i)
 }
}
const OptionsData = reactive<EChartsOption>(Gas30DayOptions) as EChartsOption;
const getMonthlySales = async (res) => {
    const i= res.datas.map(item=>{
      return  {
        name: item.typeName,
        smooth: true,
        type: "line",
        data: item.datas,
      }}
     )
    set(
      OptionsData,
      "xAxis.data",
      res.dates
    );
    set(
      OptionsData,
      "legend.data",
      res.types
    );
    set(OptionsData, "series",
    i
    );
};

</script>
<template>
  <ContentWrap style="height: 100%;">
    <ElForm :inline="true" :model="formData" class="demo-form-inline">
    <ElFormItem label="模糊搜索">
      <ElInput v-model="formData.NameOrdeviceNo" placeholder="输入站点名称或设备编号" />
    </ElFormItem>
    <ElFormItem label="排序">
      <ElRadioGroup v-model="formData.Date">
      <ElRadio value="today">今日用气量</ElRadio>
      <ElRadio value="yestoday">昨日用气量</ElRadio>
    </ElRadioGroup>
    </ElFormItem>
    <ElFormItem>
      <ElRadioGroup v-model="formData.Sort">
      <ElRadio value="Asc">升序</ElRadio>
      <ElRadio value="desc">降序</ElRadio>
    </ElRadioGroup>
    </ElFormItem>
    </ElForm>
      <div class="h-[550px]  overflow-auto">
      <div
        class="BgStyle gutter-box Border"
        v-for="(item, index) in markers"
        :key="index"
      >
        <p class="TitleStyle">
          <i>
            <span
              class="TitleStyleSpan"
            ></span>
          </i>
         <span class="text-[16px]">
          {{ item.siteName }}
         </span>
        </p>
        <span class="GasDetail" @click="MonthDetail(item)"><ElTooltip effect="dark" content="查看详情" placement="top"><Icon icon="vi-ant-design:eye-outlined" /></ElTooltip></span>
        <div class="flex pl-[30px] pr-[0px] pt-[15px]">
          <div class="left" >
            <p>当日用气量</p>
            <span>{{ item.dayReports }} m<sup>3</sup></span>
          </div>
          <div class="right" >
            <p>昨日用气量</p>
            <span>{{ item.ydayReports }} m<sup>3</sup></span>
          </div>
        </div>
      </div> 
      </div>
  <Dialog v-model="dialogVisible" title="30天用气量统计"  style="width:70%">
    <Echart :options="OptionsData" height="90%" />
    <template #footer>
      <BaseButton
        type="primary"
        @click="save"
      >
       确认
      </BaseButton>
      <BaseButton @click="dialogVisible = false">关闭</BaseButton>
    </template>
  </Dialog>
  </ContentWrap>

</template>

<style scoped lang="less">
.BgStyle{
  background:white;
  margin-bottom: 15px;
  position: relative;
}
:deep(.el-scrollbar__view){
height:100%
}
.GasDetail{
    position:absolute;
    right: 10px;
    font-size: 13px;
    top:15px;
    cursor: pointer;
    color: #409eff;
  }
.TitleStyle{
  margin: 0;
  position: relative;
  width: 100%;
  background: #3a6acb4a;
  line-height: 45px;
  color: #3A6ACB;
  font-weight: bold;
  padding: 0 35px;
  position: relative;
  i{
    display: inline-block;
    position: absolute;
    top: 35%;
    left: 10px;
    bottom: 50%;
    border: 1px solid #3A6ACB;
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    .TitleStyleSpan{
      position: absolute;
      top: 23%;
      bottom: 50%;
      left: 30%;
      background: #3A6ACB;
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
    }
  }
 
}


.Hid {
  display: none;
}

.Show {
  display: inline-block;
}

.Border {
  width: 300px /* 300/192 */;
  height: 128px /* 128/192 */;
  float: left;
  margin-right: 25px/* 25/192 */;
  border: 1px solid #d9d9d9;
}
.left ,
.right {
  width: 50%;
}
.left > p,
.right > p {
  font-size:12px;
  color: #3A6ACB;
  margin: 0px !important;
}

.left > span,
.right > span {
  display: inline-block;
  color: #3A6ACB;
  font-size: 19px /* 19/192 */;
  font-weight: bold;
  height: 45px /* 45/192 */;
  line-height: 45px /* 45/192 */;
  width: 120px /* 120/192 */;
  white-space: nowrap;
 text-overflow: ellipsis;
overflow: hidden;

}




</style>
